<!-- <template>
	<view class="content">
		<image class="logo" src="/static/logo.png" />
		<view class="menu_item_div">
			<view class="et_div">
				<view class="menu_txt">手机号：</view>
				<input class="et" placeholder="请输入手机号" type="number" maxlength="15" v-model="phone"
					@input="onInput($event,1)" />
			</view>
		</view>

		<view class="menu_item_div">
			<view class="et_div">
				<view class="menu_txt">密码：</view>
				<input class="et" placeholder="请输入密码" type="safe-password" password maxlength="20" v-model="password"
					@input="onInput($event,2)" />
			</view>
		</view>

		<view class="menu_item_div">
			<view class="sms_div">
				<view class="menu_txt" style="margin: 0 0 0 0rpx;">验证码：</view>
				<input class="et_sms" placeholder="点击输入" type="number" maxlength="6" v-model="sms_code"
					@input="onInput($event,3)" />
				<view class="btn_get_sms" @click.stop="onGetSmsCode">点击获取</view>
			</view>
		</view>

		<view class="regist_div">
			<view></view>
			<view class="btn_login" @click="onLogin">登录账号</view>
		</view>

		<view class="btn_ok" @click.stop="onOk">注册</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '139',
				password: '123456',
				sms_code: '',
			}
		},
		methods: {
			onInput(e, type) {
				// console.log('输入的e = ', e);
				// console.log('输入的type = ', type);
			},
			onLogin() {
				uni.navigateTo({
					url: `/pages/login/login`,
				})
			},
			onGetSmsCode() {
				uni.showToast({ title: '获取验证码', icon: 'none' })
			},
			onOk() {
				let that = this
				let phone = that.phone
				let password = that.password
				uni.showModal({
					title: '提示',
					content: '是否提交注册信息？',
					success: res => {
						if (res.confirm) {
							uni.showToast({ title: `手机号${phone},密码${password}`, icon: 'none' })
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 160rpx;
		width: 160rpx;
		margin: 200rpx auto 100rpx auto;
	}

	.menu_item_div {
		display: flex;
		align-items: center;
		margin: 40rpx 0 0 0;
	}

	.menu_txt {
		width: 180rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.et_div {
		display: flex;
		align-items: center;
		border: solid 1rpx rgba(1, 1, 1, 0.15);
		width: 500rpx;
		height: 66rpx;
		line-height: 66rpx;
		border-radius: 888rpx;
		/* background-color: white; */
	}

	.et {
		font-size: 30rpx;
	}

	.et_sms {
		/* flex-grow: 1; */
		width: 160rpx;
		font-size: 30rpx;
		/* background-color: blue; */
	}

	.sms_div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: solid 1rpx rgba(1, 1, 1, 0.15);
		width: 500rpx;
		height: 66rpx;
		line-height: 66rpx;
		border-radius: 888rpx;
		/* background-color: white; */
	}

	.btn_get_sms {
		width: 160rpx;
		font-size: 24rpx;
		text-align: center;
		margin: 0 0rpx 0 0;
		/* background-color: red; */
	}

	.regist_div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: rgba(1, 1, 1, 0.55);
		width: 500rpx;
	}

	.btn_login {
		padding: 30rpx 0 30rpx 30rpx;
		font-size: 26rpx;
	}

	.btn_ok {
		background-color: deepskyblue;
		width: 500rpx;
		height: 66rpx;
		line-height: 66rpx;
		color: white;
		text-align: center;
		font-size: 30rpx;
		margin: 20rpx 0 0 0;
		border-radius: 888rpx;
	}
</style> -->